import deviceApi from "../../api/deviceInfo";
import * as echarts from '../../ec-canvas/echarts';

const app = getApp();

Page({
  data: {
    spotMap: {
      y2022m5d9: 'deep-spot',
      y2022m5d10: 'spot',
      y2022m6d10: 'spot',
      y2022m7d10: 'spot',
      y2022m8d10: 'spot',
      y2022m10d1: 'spot',
      y2023m5d10: 'spot',
    },
    // 例子，今天之后的日期不能被选中
    disabledDate({ day, month, year }) {
      const now = new Date();
      const date = new Date(year, month - 1, day);
      return date > now;
    },
    // 需要改变日期时所使用的字段
    changeTime: '',
    // 存储已经获取过的日期
    dateListMap: [],
    ec: {
      lazyLoad: true // 延迟加载
    },
    info: {},
    tabsVal: '',
    month: '',
    day: '',
    indx: 0,
    dataX: [],
    dataList: []
  },

  onLoad (options) {
    if(options) {
      this.setData({
        id: options.id
      })
      this.init();
    }
    this.echartsComponnet = this.selectComponent('#mychart');
  },

  init () {
    deviceApi.getDeviceDetail(this.data.id).then(res => {
      this.setData({
        info: res.data,
        targetKey: res.data?.deviceTargetLogVoList[0]?.targetKey
      })
    })
  },

  // 获取月数据
  getMonthData () {
    console.log(this.data.month, 'this.data.month')
    let params = {
      deviceId: this.data.id,
      targetKey: this.data.targetKey,
      month: this.data.month
    }
    deviceApi.getQueryByMonth(params).then(res => {
      
    })
  },

  // 获取日数据
  getDayData () {
    let params = {
      deviceId: this.data.id,
      targetKey: this.data.targetKey,
      day: this.data.day
    }
    deviceApi.getQueryByDay(params).then(res => {
      let list = res.data.map(item => {
        return item.hour
      })
      let dataList = res.data.map(item => {
        return item.value
      })
      this.setData({
        dataX: list,
        dataList: dataList
      })
      this.initChart()
    })
  },

  // 获取指标数据

  // 获取日期数据，通常用来请求后台接口获取数据
  getDateList({ detail }) {
    // 检查是否已经获取过该月的数据
    if (this.filterGetList(detail)) {
      // 获取数据
      console.log(detail, '获取数据');
      this.setData({
        month: `${detail.setYear}/${detail.setMonth}`
      })
    }
  },
  // 过滤重复月份请求的方法
  filterGetList({ setYear, setMonth }) {
    const dateListMap = new Set(this.data.dateListMap);
    const key = `y${setYear}m${setMonth}`;
    if (dateListMap.has(key)) {
      return false;
    }
    dateListMap.add(key);
    this.setData({
      dateListMap: [...dateListMap],
    });
    return true;
  },
  // 日期改变的回调
  selectDay({ detail }) {
    console.log(detail.year, detail.month,  'selectDay detail');
    this.setData({
      month: `${detail.year}/${detail.month}`,
      day: `${detail.year}/${detail.month}/${detail.day}`
    })
    setTimeout(() => {
      this.getMonthData();
      this.getDayData();
    }, 300)
    
  },
  // 展开收起时的回调
  openChange({ detail }) {
    console.log(detail, 'openChange detail');
  },
  changetime() {
    this.setData({
      changeTime: '2022/1/1',
    });
  },
  changeIndex(e) {
    let { index, key } = e.currentTarget.dataset;
    this.setData({
      indx: index,
      targetKey: key
    })
    this.getDayData()
  },
  initChart() {
    this.echartsComponnet.init((canvas, width, height, dpr) => {
      const Chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr // new
      });
      var option = {
        grid: {
          containLabel: true
        },
        tooltip: {
          show: true,
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.data.dataX,
          axisLabel: {
            textStyle: {
              fontSize: "10",
            },
          },
        },
        yAxis: {
          show: false
        },
        series: [{
          name: '',
          type: 'line',
          smooth: true,
          showSymbol: false,
          lineStyle: {
            color: "#165dff"
          },
          itemStyle: {
            normal: {
              color: "#165dff"
            }
          },
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "rgba(209, 223, 255, 1)", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "rgba(209, 223, 255, 0)", // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
          },
          data: this.data.dataList,
        }],
        
      };
    
      Chart.setOption(option);
      return Chart;

    })
    
    
  }
});
